<template>
	<view class="forget-content">
		<u-form :model="params" ref="uForm">
				<u-form-item class="mobile" prop="mobile">
					<u-input placeholder="输入手机号" type="number" v-model="params.mobile" clearable style="height:90rpx"></u-input>
				</u-form-item>
			<view class="code">
				<u-input placeholder="输入验证码" v-model="params.code" clearable style="height:90rpx;width: 70%;"></u-input>
				<u-verification-code :seconds="seconds"  end-text="重新获取验证码" ref="uCode"
				@change="codeChange"></u-verification-code>
				<span class="get-code" @tap="getCode">{{tips}}</span>
			</view>
			<view class="set-password">
				<u-input type="password" placeholder="设置密码" v-model="password" clearable style="height:90rpx"></u-input>
			</view>
			<view class="repeat-password">
				<u-input type="password" placeholder="重复密码" v-model="repeatPassword" clearable style="height:90rpx"></u-input>
			</view>
			<view class="complete-row">
				<u-button type="default" shape="circle" text="完成" class="complete-btn" @click="completeHandle"
					hover-class="none">完成</u-button>
			</view>
		</u-form>
	</view>
</template>

<script>
	import { API } from '../../config/myApi.js';
	export default {
		data() {
			return {
				password:'',
				repeatPassword:'',
				// 验证码
				seconds: 60,
				tips: '',
				// 表单
				params:{
					mobile:'',
					code:'',
				},
				rules: {
					// mobile: [
					// 	{ 
					// 		required: true, 
					// 		message: '请输入手机号', 
					// 		trigger: ['change','blur'],
					// 	},
					// 	{
					// 		pattern: /^[0-9a-zA-Z]*$/g,
					// 		transform(value) {
					// 			return String(value);
					// 		},
					// 		message: '密码需同时包含字母和数字，必须在6-12位之间',
					// 		// trigger: 'change'
					// 	},
					// ],
				}
			}
		},
		onReady() {
				this.$refs.uForm.setRules(this.rules);
			},
		methods: {
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					this.getCodeHandle()
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						this.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
			
					}, 0);
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			//获取验证码
			getCodeHandle(){
				const pram = {
					mobile: this.params.mobile,
					verificationEnums: 'FIND_USER'
				}
				API.getCodeByPhone(pram.verificationEnums,pram.mobile).then(res=> {
					console.log('获取验证码',res)
					if(!res.success){ // 失败了提示一下
						this.$u.toast(res.message);
					}
				})
			},
			//重置密码
			completeHandle() {
				const pwd = this.md5(this.password)
				const pram = {
					...this.params,
					password: pwd,
					// uuid: this.$store.state.uuid,
				};
				if(this.password==this.repeatPassword) {
					// console.log(pram, '参数');
					// 重置密码后返回登录页面
					API.resetByMobile(pram).then(res=> {
						console.log('重置密码',res)
						if(res.code === 200){
							uni.navigateTo({
								url:"/pages/passport/login"
							})			
						}else{
							uni.showToast({
								title:res.message,
								icon:"none"
							})
						}
					})
				}else {
					uni.showToast({
						title: "两次密码不一致!",
						duration: 2000,
						icon: "none",
					});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-form-item{
		position: relative;
		padding:0;
		.u-form-item__message{
			position: absolute;
			bottom:-32rpx ;
			left: -94rpx;
		}
	}
	.forget-content {
		background-color: #fff;
		padding: 0rpx 50rpx;
		min-height: calc(100vh - 88rpx);
		overflow: hidden;
		.mobile{
			margin-top: 74rpx;
		}

		.mobile,
		.code,
		.set-password,
		.repeat-password {
			border-bottom: 1rpx solid #E3E3E3;
		}

		.code,
		.set-password,
		.repeat-password {
			margin-top: 50rpx;
			position: relative;

			.get-code {
				font-size: 26rpx;
				color: #F4333C;
				position: absolute;
				right: 0;
				top: 18rpx;
			}
		}

		.complete-row {
			margin-top: 60rpx;

			.complete-btn {
				background-color: #F4333C;
				color: #fff;
				height: 90rpx;
			}

			.u-hairline-border:after {
				border: none;
			}
		}
	}
</style>
